import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import {
  BrowserRouter,
  Route,
  Routes,
  Navigate,
  useLocation,
  useParams,
  useSearchParams,
  useMatch,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  useLoaderData,
  Outlet,
} from "react-router-dom";
import "./index.css";
import Layout from "./Layout/Head.jsx";
import { Button } from "antd";
import { lazy, useEffect, useState } from "react";
import axios from "axios";
import AppRouter from "./router/index.jsx";
function Bpp() {
  console.log("bpp render");
  const location = useLocation();
  console.log(location);
  return <div>bpp</div>;
}
function Cpp() {
  console.log("cpp render");
  return <div>cpp</div>;
}
function User() {
  console.log("bpp render");
  // http://localhost:5173/User/1234?name=lisi
  const location = useLocation();
  const params = useParams();
  const [searchParams, setParams] = useSearchParams();
  // console.log(searchParams, setParams);
  const name = searchParams.get("name"); // 不存在的为null
  const match = useMatch("/User/:id");
  // console.log(match); //检查当前路径匹配规则
  // const [httpName, setHttpName] = useState("");
  // useEffect(() => {
  //   axios.get("/api/user/1234").then((res) => {
  //     console.log(res);
  //     setHttpName(res.data.name);
  //   });
  // });
  const res = useLoaderData();
  return (
    <div>
      <div>user.</div>
      <div>{JSON.stringify(location)}</div>
      <div> {JSON.stringify(params)}</div>
      <div> {JSON.stringify(name)}</div>
      {/* <div>{httpName}</div> */}
      {res.data.name}
      <Button onClick={() => setParams({ name: "mike", age: 18 })}>123</Button>
    </div>
  );
}

const Project = lazy(() => import("./project"));
function Projects() {
  return (
    <div>
      <h1>project 子节点</h1>
    </div>
  );
}
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route path="/Bpp" element={<Bpp />}></Route>
      <Route path="/Cpp" element={<Cpp />}></Route>
      <Route
        loader={async (params) => {
          console.log("==============================");
          console.log(params);
          const url = params.request.url;
          const url_data = new URL(url);
          const name = url_data.searchParams.get("name");
          console.log("name", name);
          const res = await axios.get("/api/user/" + params.params.id);
          // const res = await axios.get("/api/delayUser/" + params.params.id);

          return res;
        }}
        path="/User/:id"
        element={<User />}
      ></Route>
      <Route
        loader={async (request) => {
          const res = await axios.get("/api/delayUser/" + request.params.id);
          return res.data;
        }}
        path="/project"
        lazy={async () => {
          const data = await import("./project");
          const Projects = data.default;
          return {
            element: <Projects />,
          };
        }}
      >
        <Route path=":id" element={<Projects />}></Route>
      </Route>
    </Route>
  )
);
createRoot(document.getElementById("root")).render(
  <RouterProvider router={AppRouter} />
);
